<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow">
        <a-form size="small" :model="pageData" layout="inline">
          <a-form-item label="保养类型">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder="" v-model="dropDownData"
              @press-enter="huiche" />
          </a-form-item>
        </a-form>
        <div>
          <Toolbar :items="['查询', '新增', '删除']" @add="addHandler" @del="deleteHandler" @select="selectHandler">
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <!-- <a-tabs   :justify="true" default-active-key="1">
                <a-tab-pane key="1" title="保养类型列表"> -->
      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
        @grid-ready="gridReady" style="height: calc(100% - 45px)" :defaultColDef="defaultColDef" class="ag-theme-alpine"
        :rowData="tableDataList" :columnDefs="tc" :localeText="localeText1">
      </AgGridVuesCopys>
      <paginationCopys :total="fySelet.total" show-total show-jumper show-page-size @change="PageSize"
        @page-size-change="change" style="justify-content: center" :page-size="fySelet.size" :current="fySelet.page" />
      <!-- </a-tab-pane>
            </a-tabs> -->
    </template>

    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }" :mask-closable="false"
      :width="400" :ok-loading="pageData.pageLoading" :visible="showAdd" unmountOnClose @ok="addOk"
      @cancel="showAdd = false">
      <template #title>
        {{ sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" :model="dataForm">
          <a-form-item label-col-flex="120px" label="保养类型名称" field="upkeepName"
            :rules="[{ required: true, message: '保养名称必填' }]" :validate-trigger="['change', 'blur']">
            <a-input allow-clear class="bacClass" placeholder="" v-model="dataForm.upkeepName" />
          </a-form-item>
          <a-form-item label-col-flex="120px" label="保养类型周期" field="upkeepType"
            :rules="[{ required: true, message: '保养名称必填' }]" :validate-trigger="['change', 'blur']">
            <a-input allow-clear class="bacClass" placeholder="" v-model="dataForm.upkeepType" />
          </a-form-item>
          <a-form-item label-col-flex="120px" label="保养天数" field="upkeepDay"
            :rules="[{ required: true, message: '保养天数必填' }]" :validate-trigger="['change', 'blur']">
            <a-input-number allow-clear class="bacClass" v-model="dataForm.upkeepDay" />
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script setup lang="ts">
import { post, get } from '@/api/http'
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue'

import { Message, Modal } from '@arco-design/web-vue'
import { localeText } from '@/api/aggridZw'
const localeText1: any = ref(localeText)

const headerShow = ref(true)

const pageData: any = reactive({
  dropDownData: '',
  showAdd: false,
  sideTitle: '',
})

const { dropDownData, showAdd, sideTitle } = toRefs(pageData)

const dataForm: any = reactive({
  upkeepType: '',
  upkeepName: '',
  upkeepDay: null,
})

function selectList() {
  post({
    url: 'zcTemRepair/upkeepType/infoUpkeepTypePage',
    data: {
      page: fySelet.page,
      limit: fySelet.size,
      upkeepName: pageData.dropDownData,
    },
  }).then((res: any) => {
    gridOption.value.setRowData(res.data.list)
    fySelet.total = res.data.total
  })
}

const huiche = () => { }

const selectHandler = () => {
  selectList()
}

const addHandler = () => {
  for (let i in dataForm) {
    dataForm[i] = ''
  }
  pageData.sideTitle = '新增保养类型'
  pageData.showAdd = true
}

const deleteHandler = () => {
  if (gridOption.value.getSelectedRows().length === 0) {
    return false
  }
  Modal.confirm({
    title: '系统提示',
    content: '确认删除选中的数据?',
    onOk() {
      post({
        url: 'zcTemRepair/upkeepType/deleteUpkeepType',
        data: gridOption.value.getSelectedRows().map((o: any) => {
          return o.id
        }),
      }).then(({ code, data }: any) => {
        if (code === 200) {
          Message.success({
            content: '删除成功',
            duration: 5000,
          })
          fySelet.page = 1
          selectList()
        } else {
          Message.error({
            content: '删除失败',
            duration: 5000,
          })
        }
      })
    },
  })
}

const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
  flex: 1,
}

const fySelet: any = reactive({
  total: 10,
  size: 10,
  page: 1,
})

const PageSize = (val: any) => {
  fySelet.page = val
  selectList()
}

const change = (val: any) => {
  fySelet.size = val
  selectList()
}

const tc = [
  {
    showRowGroup: 'hide_def',
    headerName: '',
    checkboxSelection: true,
    headerCheckboxSelection: true,
    pinned: 'left',
    width: 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: 'left',
  },
  // {
  //     headerName: '序号',
  //     field: 'id',
  //     // pinned: o['fixed'],
  //     width: 150
  // },
  {
    headerName: '保养类型名称',
    field: 'upkeepName',
    width: 150,
  },
  {
    headerName: '保养类型周期',
    field: 'upkeepType',
    width: 150,
  },
  {
    headerName: '保养天数',
    field: 'upkeepDay',
    width: 150,
  },
  {
    headerName: '创建人',
    field: 'createName',
    width: 150,
  },
  {
    headerName: '创建时间',
    field: 'createTime',
    width: 150,
  },
  {
    headerName: '最后修改人',
    field: 'updateName',
    width: 150,
  },
  {
    headerName: '最后修改时间',
    field: 'updateTime',
    width: 150,
  },
  {
    headerName: '操作',
    field: 'slot',
    pinned: 'right',
    width: 120,
    cellRenderer: {
      template: `
            <a-space>
                <a-tag class="tagCss" @click="a">修 改</a-tag>
            </a-space>
            `,
      setup(props: any) {
        const a = () => {
          updateList(props.params.data) // props.params.data
        }
        return {
          a,
        }
      },
    },
  },
]

const formRef: any = ref()

const addOk = () => {
  if (pageData.sideTitle == '新增保养类型') {
    formRef.value?.validate().then((err: any) => {
      if (!err) {
        post({
          url: 'zcTemRepair/upkeepType/saveUpkeepType',
          data: [dataForm],
        }).then((res: any) => {
          if (res.code == 200) {
            Message.success('成功')
            pageData.showAdd = false
            selectList()
          } else {
            Message.error(res.message)
          }
        })
      }
    })
  } else {
    formRef.value?.validate().then((err: any) => {
      if (!err) {
        post({
          url: 'zcTemRepair/upkeepType/updateUpkeepType',
          data: [dataForm],
        }).then((res: any) => {
          if (res.code == 200) {
            Message.success('成功')
            pageData.showAdd = false
            selectList()
          } else {
            Message.error(res.message)
          }
        })
      }
    })
  }
}

const updateList = (e: any) => {
  for (let i in e) {
    dataForm[i] = e[i]
  }
  pageData.sideTitle = '修改保养类型'
  pageData.showAdd = true
}
</script>
<style scoped lang="less">
:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}
</style>
